<script setup>
import { onMounted, ref } from 'vue'
import { upload } from '@/api/request';
import { addProductListService,updateProductListService,getProductListService } from '@/api/product.js'
// import type { UploadProps, UploadUserFile } from 'element-plus'
// import {baseURL} from '@/utils/request.js'
import { ElMessage } from 'element-plus'
const drawer = ref(false)
const value1=ref('')
const options = [
{
    value: '已上架',
    label: '已上架',
  },
  {
    value: '下架',
    label: '下架',
  }
]
// const count = ref(1)
const defaultForm = {
  categoryId: null,
  id: 1,
  name: '',
  price: '',
  description: '',
  mainPicture: '',
  productAddress: '',
  pictures: [],
  saleStatus: 1,
  overCount:0
}
const imgUrl = ref([])
const form = ref(defaultForm)
const options1 = ref([
  {
    value: '茶叶',
    label: '茶叶'
  },
  {
    value: '茶具',
    label: '茶具'
  },
  {
    value: '茶书',
    label: '茶书'
  },
  {
    value: '艺术',
    label: '艺术'
  }
])
let isEdit = false
const open =async (row) => {
  if(row.isEdit){
    isEdit=true
  }else{
    isEdit=false
  }
  drawer.value = true
  form.value = { ...row }
 
  if(row.id){
    // const res = await getProductListService()
    // console.log('%%%%%%%%',res.data.data);
    // form.value = res.data.data
    // imgUrl.value = form.value.pictures
    // console.log('acawefsw',res.data.data);
    console.log('编辑回显');
  
  } else{
    form.value = {
      ...defaultForm 
    }
    // imgUrl.value = '' 
  }
}
defineExpose({
  open
})

// const count=ref(0)
// const countChange=(count)=>
// {
//   console.log("count",count)
//   form.value.over_count=count
//   console.log("count111",form.value.over_count)
// }
const emit = defineEmits(['success'])
console.log('1234556788',form.value.id);



const onSubmit = async () => {
  

  form.value.pictures = imgUrl.value
  console.log("form的上架状态为",form.value)
  if(form.value.saleStatus=="已上架"||form.value.saleStatus=='1'){
    form.value.saleStatus=1
  }else if(form.value.saleStatus=='已下架'||form.value.saleStatus=='0'){
    form.value.saleStatus=0
  }
  if (isEdit) {
    
    const res = await updateProductListService(form.value)
    setTimeout(()=>{
      console.log("需要修改的商品",form.value)
    },1000)
    ElMessage.success('编辑成功')
    drawer.value = false
    emit('success')
  } else {
    console.log("添加的数据为",form.value)
    let res =await addProductListService(form.value)
    console.log('PPPPPPPPPPPPPPPPPP',res)
    ElMessage.success('添加成功')
    drawer.value = false
    imgUrl.value=[]
    tea.value = ''
    emit('success')
  }

  
}

const pictureUpload= async function (file){
    
    const formData = new FormData();

    formData.append('file',file)

    const res = await upload(formData)

    const url = res.data.data
    imgUrl.value.push(url) 
}


const tea=ref()

const handleTea=()=>{
  let tempIndex
  options1.value.forEach((item,index)=>{
    if(tea.value==item.value){
      tempIndex=index+1
    }
  })
  form.value.categoryId=tempIndex
}
</script>


<template>
  <el-drawer
    size="40%"
    v-model="drawer"
    :with-header="false"
  >
    <template #default>
      <div> 
        <h4 class="header-h4" v-if="!isEdit">添加商品</h4>
        <h4 class="header-h4" v-else>编辑商品</h4>
        <el-form :model="form" style="width: 400px;" class="header-form">
          <el-form-item label="商品名称:" class="item1" prop="name">
            <el-input v-model="form.name" placeholder="请输入商品名称"></el-input>
          </el-form-item>
          <el-form-item label="商品类别:" class="item2" prop="categoryId">
           <el-select v-model="tea" placeholder="请输入商品分类">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              @click="handleTea()"
          />
           </el-select>
          </el-form-item>
          <el-form-item label="商品价格:" class="item3" prop="price">
            <el-input v-model="form.price" placeholder="请输入商品价格"></el-input>
          </el-form-item>
          <el-form-item label="商品详情:" class="item4" prop="description">
            <el-input
              v-model="form.description"
              style="width: 400px"
              :rows="5"
              type="textarea"
              placeholder="请输入商品详情"
            />
          </el-form-item>
          <el-form-item label="商品图片">
            <h3>选择产品图片或在此一次拖放,最多5张照片，包括至少2张照片</h3>
            <!-- <img v-if="imgUrl" :src="imgUrl[0]" alt=""> -->
            <div v-for="(p,index) in imgUrl" :key="index" class="picture"
            >
              <img  :src="p">
            </div>
            <!-- <div>--------------------------------</div> -->
            <el-upload
              list-type="picture-card"
              :before-upload="pictureUpload"
            >
            <!-- <div class="user">
              <img v-if="imgUrl" :src="imgUrl" alt="">
            </div> -->
            <el-icon><Plus /></el-icon>
            </el-upload>
          </el-form-item>
          <el-form-item label="商品产地:" class="item5" prop="productAddress">
            <el-input v-model="form.productAddress" placeholder="请输入商品产地"></el-input>
          </el-form-item>
          <el-form-item label="销售状态:" class="item7" prop=salesStatus>
            <el-select class="header-select" v-model="form.salesStatus" placeholder="已上架" style="width: 150px">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品数量:" class="item6" prop="overCount">
            <el-input-number v-model="form.overCount" :min="1" />
          </el-form-item>
        </el-form>
      </div>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="drawer=true">取消</el-button>
        <el-button color="#27bd9b" @click="onSubmit">确认</el-button>
      </div>
    </template>
  </el-drawer>
</template>
<style lang="scss" scoped>
.header-h4 {
  color: #27bd9b;
  text-align: center;
  font-size: 20px;
  margin-bottom: 30px;
  .header-form {
  margin-left: 30px;
  .item1 {
    margin-bottom: 30px;
  }
  .item2 {
    margin-bottom: 30px;
  }
  .item3 {
    margin-bottom: 30px;
  }
  .item4 {
    margin-bottom: 30px;
  }
  .item5 {
    margin-bottom: 30px;
  }
  .item6 {
    margin-bottom: 30px;
    .drawer-span {
      margin: 0 10px;
    }
  }
  .item7 {
    margin-bottom: 30px;
  }
}
}
.picture {
    display:inline-block;
    margin-right:10px;
    img {
      width:150px;
      height:150px;
    }
  }
</style>